<template>
    <div class="water-card">
        <!-- 动态标题位置 -->
        <div :class="['title', titlePosition]">{{ title }}</div>

        <div class="card-container">
            <dv-water-level-pond :config="wlpConfig" :style="wlpStyle" />
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    wlpConfig: { type: Object, default: () => ({}) },     // 水位图配置
    title: { type: String, default: '' },     // 标题文本
    titlePosition: {                         // 标题位置
        type: String,
        default: 'top',
        validator: v => ['top', 'bottom', 'left', 'right'].includes(v)
    },
    wlpStyle: { type: Object, default: () => ({}) } // 卡牌背景样式
});

</script>

<style scoped>
.water-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题位置控制 */
.title.top {
    order: -1;
    margin-bottom: 15px;
}

.title.bottom {
    order: 1;
    margin-top: 15px;
}

.title.left {
    align-self: flex-start;
    margin-right: 10px;
}

.title.right {
    align-self: flex-end;
    margin-left: 10px;
}

.card-container {
    display: flex;
    gap: 8px;
}

.card-item {
    position: relative;
    width: 30px;
    height: 40px;
    /* perspective: 500px; */
    /* 3D透视效果 */
}

.card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2c3e50, #4a6491);
    /* 默认背景 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.digit-roll {
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.digit-roll span {
    display: block;
    height: 100%;
    line-height: 90px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.digit-static {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: white;
    z-index: 2;
    /* 确保数字在卡牌背景上方 */
}
</style>